<template>
    <div>
        <div v-if='!dizhi.id' class="itemmm" >
            <el-button @click="addDizhi">添加收货地址</el-button>
        </div>
          <div class="itemm" v-else @click="addDizhi">
      <div>姓名:{{dizhi.name}}</div>
      <div style="margin: 10px 0">手机号:{{dizhi.phone}}</div>
      <div>地址:{{dizhi.desc}}</div>
    </div>
      <div class="listt" v-for='v in list' :key="v.id" style="margin-top:20px;display:flex" @click.native.stop>
        
         <div class="item">
                <div class="left">
                    <img :src="v.img" alt="">
                </div>
                <div class="right" >
                    <div>{{v.title}}</div>
                      <div style="margin:10px 0">价格:
                    <span :class="{shanchu:$store.state.user.zhekou}">{{v.price}}</span>
                    <span style="color:red" v-if='$store.state.user.zhekou'> 会员: {{v.huiyuanPrice}}</span>
                  
                </div>
                      数量:{{v.count}}
                     
                </div>
              
            </div>
      </div>
        <div  class="itemmm" >
            <div>共{{sum}}件</div>
            <div>商品原价:{{totalPrice2}}元</div>
            <div>会员折后价:{{totalPrice}}元</div>
            <div>共减:{{(totalPrice2-totalPrice).toFixed(2)}}元</div>
           <div>总积分:{{$store.state.user.gouwu}}元</div>
            <div> <el-checkbox v-model="gouwu">可用积分{{$store.state.user.gouwu>totalPrice?totalPrice:$store.state.user.gouwu}}</el-checkbox></div>
        </div>
        <el-button type="primary" @click='zhifu' style="margin-top: 20px;">去支付</el-button>
    </div>
</template>

<script>
import api from "@/api/index"
    export default {
        data() {
            return {
                dizhi: {},
                list:[],
                gouwu:false
            }
        },
          computed: {
            sum() {
                let t=0
                 this.list.forEach(v=>{
                    if(v.seleted==1){
                        t+=v.count
                    }
                 })
                 return t
            },
              totalPrice() {
                let t=0
                 this.list.forEach(v=>{
                    if(v.seleted==1){
                        t+=v.count*(v.huiyuanPrice||v.price)
                    }
                 })
                 return t.toFixed(2)
            },
            totalPrice2() {
                let t=0
                 this.list.forEach(v=>{
                    if(v.seleted==1){
                        t+=v.count*v.price
                    }
                 })
                 return t.toFixed(2)
            }
        },
        methods: {
            zhifu(){
                if(!this.dizhi.id){
                    return this.$message({
          message: '请先选择地址',
          type: 'warning'
        });
                }
                  this.$confirm('是否确定支付?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            let data={
                userId:this.$store.state.user.id,
                jifen:this.gouwu,
                statuss:2,
                status:2,
                dizhiId:this.dizhi.id,
                price:this.totalPrice,
            }
            data.list=this.list.map(v=>{
                return {
                    productId:v.productId,
                    count:v.count,
                    price:v.huiyuanPrice || v.price
                }
            })
            api.addOrder(data).then(res=>{
                console.log(res);
 if(res.code==200){
       this.$message({
            type: 'success',
            message: '购买成功!'
          });
 }
            })
            console.log(data);
      
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });
            },
            addDizhi() {
                this.$router.push("/dizhi?id="+123)
            },
                getList() {
                api.getCartById({userId:this.$store.state.user.id,seleted:1}).then(res=>{
                    this.list=res.data
                    console.log(111,res);
                    if(this.$store.state.user.zhekou){
                        this.list.forEach(v=>{
                            v.huiyuanPrice=(this.$store.state.user.zhekou*v.price*0.1).toFixed(2)
                        })
                    }
                })
            }
        },
        mounted () {
         if(this.$route.query.user){

             this.dizhi=JSON.parse(this.$route.query.user)
         }
         this.getList()
        },
    }
</script>

<style lang="scss" scoped>
.listt{
    background-color: white;
width: 1200px;
box-sizing: border-box;
padding: 20px;
}
.itemm {
    height: 100px;
  margin-top: 20px;
  border-radius: 10px;
  font-size: 20px;
  // display: flex;
  border: 1px solid gray;
  padding: 10px;
  cursor: pointer;
  &:hover{
    background-color: #ddd;
  }
}
.itemmm{
    background-color: white;
    
      height: auto;
  margin-top: 20px;
  border-radius: 10px;
  font-size: 20px;
  // display: flex;
  border: 1px solid gray;
  padding: 10px;
}
.bottom{
    span{
        display: inline-block;
        // height: 40px;
        // line-height: 40px;
        font-size: 20px;
    }
}
.item{
    display: flex;
    .left{
        margin-left: 20px;
        margin-right: 20px;
        img{
            width: 100px;
            border-radius: 10px;
            height: 100px;
        }
    }
}
.el-radio{
    width: 100%;
    display: flex;
}
.shanchu{
      text-decoration: line-through;
}
</style>